<template>
  <component
      is="a-modal"
      v-model:visible="visible"
      :width="1200"
      :title="title"
      :mask-closable="false"
      :ok-loading="loading"
      @cancel="close"
      @before-ok="submit"
  >
    <!-- 详情信息展示 -->
    <div class="detail-container">
      <div class="detail-row">
        <div class="detail-label">留言分类</div>
        <div class="detail-value">{{formData.feedback_classify_text}}</div>
      </div>
      <div class="detail-row">
        <div class="detail-label">联系人</div>
        <div class="detail-value">{{ formData.user_name }}</div>
      </div>
      <div class="detail-row">
        <div class="detail-label">联系电话</div>
        <div class="detail-value">{{ formData.contact_number }}</div>
      </div>
      <div class="detail-row">
        <div class="detail-label">反馈意见</div>
        <div class="detail-value">{{ formData.feedback_content }}</div>
      </div>
      <div class="detail-row">
        <div class="detail-label">附件</div>
        <div class="detail-value">
          <!-- 循环输出图片 -->
          <div v-for="(file, index) in formData.files" :key="index" class="image-item">
            <img
                :src="file"
                alt="附件图片"
                class="preview-image"
                @click="showLargeImage(file)"
                style="cursor: zoom-in"
            />
          </div>
        </div>
      </div>
      <div class="detail-row">
        <div class="detail-label">提交时间</div>
        <div class="detail-value">{{ formatDate(formData.create_time) }}</div>
      </div>
      <div class="detail-row">
        <div class="detail-label">状态</div>
        <div class="detail-value">{{ getStatusText(formData.status) }}</div>
      </div>

    </div>

    <!-- 回复内容表单 -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
      <a-form-item label="回复内容" field="reply_content">
        <a-textarea v-model="formData.reply_content" />
      </a-form-item>
    </a-form>
  </component>

  <!-- 图片放大弹窗 -->
  <div
      v-if="isShowLargeImage"
      class="large-image-modal"
      @click="closeLargeImage"
  >
    <img
        :src="currentLargeImageSrc"
        class="large-image"
        @click.stop
        style="cursor: zoom-out"
        alt="放大的附件图片"
    >
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { Message } from "@arco-design/web-vue";
import api from "../api/feedback";

const emit = defineEmits(["success"]);
// 引用定义
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const mode = ref("");

// 图片放大相关变量
const isShowLargeImage = ref(false);
const currentLargeImageSrc = ref('');

let title = computed(() => {
  return "回复反馈问题";
});

// 表单信息
const formData = reactive({
  feedback_id: null,
  feedback_classify_text:'',
  user_name: "",
  user_id: null,
  contact_number: "",
  feedback_content: "",
  status: 0,
  reply_content: "",
  reply_time: "",
  create_time: "",
  files: [], // 初始化为数组
});

// 验证规则
const rules = {
  reply_content: [{ required: true, message: '回复内容必需填写' }],
}

// 日期格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString();
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "未处理",
    1: "已处理",
  };
  return statusMap[status] || "未知状态";
};

// 显示大图
const showLargeImage = (src) => {
  currentLargeImageSrc.value = src;
  isShowLargeImage.value = true;
  document.body.style.overflow = 'hidden';
};

// 关闭大图
const closeLargeImage = () => {
  isShowLargeImage.value = false;
  document.body.style.overflow = '';
};

// 打开弹框
const open = async (type = "add", data = {}) => {
  mode.value = type
  visible.value = true
  formRef.value.resetFields()
  setFormData(data)
  await initPage()
};

// 初始化页面数据
const initPage = async () => {
  // 若后续需要初始化数据，可在此添加逻辑
};

// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] !== null && data[key] !== undefined) {
      if (key === 'files' && typeof data[key] === 'string') {
        try {
          formData[key] = JSON.parse(data[key]);
        } catch (e) {
          formData[key] = [];
        }
      } else {
        formData[key] = data[key];
      }
    }
  }
};

// 数据保存
const submit = async (done) => {
  loading.value = true;
  let data = { ...formData };
  let result = {};

  if (mode.value === "add") {
    data.feedback_id = undefined;
    result = await api.save(data);
  } else {
    result = await api.update(data.feedback_id, data);
  }
  if (result.code === 200) {
    Message.success("操作成功");
    emit("success");
    done(true);
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// 关闭弹窗
const close = () => (visible.value = false);

// 监听ESC键关闭大图
onMounted(() => {
  const handleEsc = (e) => {
    if (e.key === 'Escape' && isShowLargeImage.value) {
      closeLargeImage();
    }
  };
  document.addEventListener('keydown', handleEsc);

  onUnmounted(() => {
    document.removeEventListener('keydown', handleEsc);
  });
});

defineExpose({ open, setFormData });
</script>

<style scoped>
.detail-container {
  padding: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-label {
  width: 120px;
  font-weight: bold;
}

.detail-value {
  flex: 1;
}

.image-item {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.preview-image {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 图片放大样式 */
.large-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.large-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: all 0.3s ease;
}
</style>
